<script setup lang="ts">
import { PageTitle, type PageTitleType } from '@/common/constants'
import { NotificationType } from '@/common/constants/notification-type'
import { NotificationTypeId } from '@/common/enum/notification-type'
import { getActivityNotificationService, getNotificationService, getSystemNotificationService } from '@/common/service/notification'

/**
 * 页面title
 */
const pageTitle = ref<PageTitleType>(PageTitle.NOTIFICATION_SYSTEM_DETAIL)

/** 通知类型 */
const notificationType = ref<NotificationTypeId>(NotificationTypeId.SYSTEM_NOTIFICATION)

const { contentAreaHeight } = useLayoutInfo()

/**
 * 通知数据列表
 */
const notifications = ref<Notification[]>()

/**
 * 根据类型获取通知信息
 */
const getSystemNotification = async () => {
  console.log('系统通知')

  const { data } = await getSystemNotificationService()

  notifications.value = data
}

const getActivityNotification = async () => {
  const { data } = await getActivityNotificationService()

  notifications.value = data
}

onLoad((options) => {
  console.log('options:', options)

  if (!options)
    return
  console.log('系统通知')
  switch (Number(options.notificationType)) {
    case NotificationTypeId.SYSTEM_NOTIFICATION:

      pageTitle.value = PageTitle.NOTIFICATION_SYSTEM_DETAIL
      getSystemNotification()
      notificationType.value = 0
      break
    case NotificationTypeId.ACTIVITY_NOTIFICATION:
      pageTitle.value = PageTitle.NOTIFICATION_ACTIVITY_DETAIL
      getActivityNotification()
      notificationType.value = 1
      break
  }
})
</script>

<template>
  <hope-nav-bar :title="pageTitle" is-back-icon />
  <scroll-view
    class="message-container" scroll-y :style="{
      height: `${contentAreaHeight}px`,
    }"
  >
    <view class="message-content">
      <view v-for="notification in notifications" :key="notification.id" class="message-item">
        <text class="message-item-text">
          {{ notification.content }}
        </text>
        <text class="message-item-time">
          通知时间: {{ notification.sendTime }}
        </text>
      </view>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
.message {
  &-container {
    background-color: $color-white;
    /* padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); */
  }

  &-content {
    display: flex;
    flex-direction: column;
    padding-inline: $padding-base;
  }

  &-item {
    display: flex;
    flex-direction: column;
    padding: $padding-base;
    gap: 30rpx;

    &-text {
      font-size: $font-size-base;
      word-wrap: break-word;
    }

    &-time {
      font-size: $font-size-sm;
      color: $uni-text-color-grey;
    }
  }
}
</style>
